<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a id="add" href="javascript:void(0)">添加</a>
<div id="box"></div>
<script>
    //给添加按钮注册事件
    var addLink = document.getElementById("add");
    addLink.onclick = function() {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);

        //生成前三列  文本框
        for(var i = 0; i < 3; i++) {
            var td = document.createElement("td");
            tr.appendChild(td);
            td.innerHTML = "<input type='text' style='width: 60px'>";
        }
        //最后一个td  确定 取消
        td = document.createElement("td");
        tr.appendChild(td);
        td.innerHTML= "<a href='javascript:void(0)'>确定</a>&nbsp;<a href='javascript:void(0)'>取消</a>";

        //点击取消  获取取消的a
        var linkCancel = getLastElement(td);
        linkCancel.onclick  = function() {
            //移除当前行
//                tbody.removeChild(getLastElement(tbody));

            tbody.removeChild(this.parentNode.parentNode)
        }

        //点击确定  获取确定的a
        var linkSure = getFirstElement(td);
        linkSure.onclick = function() {
            //1 获取文本框的值
            //tr.children[0] 第一个td
            var name = tr.children[0].children[0].value;
            var subject = tr.children[1].children[0].value;
            var score = tr.children[2].children[0].value;
            //2 把获取到的数据添加到datas中
            datas.push({"name":name,"subject":subject,"score":score});
            //3 刷新表格--重新生成表格
            //?
            createTable();
        }
    }
    //表头的数据
    var heads = ["姓名","科目","成绩","操作"];
    var datas = [
        {"name":"张三1","subject":"语文1","score":99.8},
        {"name":"张三2","subject":"语文2","score":80.8},
        {"name":"张三3","subject":"语文3","score":70.8},
        {"name":"张三4","subject":"语文4","score":100},
        {"name":"张三5","subject":"语文5","score":60},
        {"name":"张三6","subject":"语文6","score":70},
        {"name":"张三7","subject":"语文7","score":89.8}
    ];

    //获取box
    function createTable() {
        var box = document.getElementById("box");
        //判断页面上是否有table，如果有的话，删除
        var table = getFirstElement(box);
        if(table) {
            box.removeChild(table);
        }

        //1 生成表格table
        table = document.createElement("table");
        //设置宽度和边框
        table.border = "1px";
        table.style.width = "400px";
        table.style.borderCollapse = "collapse";
        //把表格添加到box中
        box.appendChild(table);

        //2 生成表头
        //thead
        var thead = document.createElement("thead");
        table.appendChild(thead);

        var tr = document.createElement("tr");
        //设置样式
        tr.style.backgroundColor = "#cccccc";
        tr.style.height = "60px";
        //把tr添加到表格中
        thead.appendChild(tr);
        for (var i = 0; i < heads.length; i++) {
            //创建th
            var th = document.createElement("th");
            //把th添加到tr中
            tr.appendChild(th);
            //设置内容
            setInnerText(th,heads[i]);
        }
        //3 生成数据
        tbody = document.createElement("tbody");
        table.appendChild(tbody);

        //设置数据行的内容居中，通过tbody
        tbody.style.textAlign = "center";

        //遍历的行
        for (var i = 0; i < datas.length; i++) {
            //每一项是一个学生对象
            var data = datas[i];
            //创建行
            tr = document.createElement("tr");
            //把tr添加到table中
            tbody.appendChild(tr);

            //遍历学生对象的所有属性
            //遍历列
            for(var key in data) {
                //创建td
                var td = document.createElement("td");
                //把td添加到数据行
                tr.appendChild(td);
                //设置td中显示的内容
                setInnerText(td, data[key]); //data.name
            }

            //增加删除的列
            var td = document.createElement("td");
            tr.appendChild(td);
            var link = document.createElement("a");
            td.appendChild(link);
            //设置内容
            setInnerText(link,"删除");
            link.href = "javascript:void(0)";

            //给删除注册事件
            link.onclick = removeTr;
        }
    }
    //加载表格
    createTable();
    //删除行
    function removeTr() {
        //让父元素移除子元素
        tbody.removeChild(this.parentNode.parentNode);
    }


    //设置innerText
    /**
     *
     * @param element
     * @param content
     */
    function setInnerText(element,content) {
        if (element.textContent) {
            element.textContent = content;
        }else{
            element.innerText = content;
        }
    }


    /**
     * 返回第一个元素 firstElementChild的浏览器兼容
     * @param parent
     * @returns {*}
     */
    function  getFirstElement(parent) {
        if (parent.firstElementChild) {
            return parent.firstElementChild;
        }else{
            var el = parent.firstChild;
            while (el && el.nodeType !== 1) {
                el = el.nextSibling;
            }
            return el;
        }
    }




    /**
     * 返回最后一个元素
     * @param parent
     * @returns {*}
     */
    function getLastElement(parent) {
        if (parent.lastElementChild) {
            return parent.lastElementChild;
        }else{
            var el = parent.lastChild;
            while (el && el.nodeType !== 1) {
                el = el.previousSibling;
            }
            return el;
        }
    }
</script>
</body>

</html>